import React,{useEffect,useRef} from 'react'
import {init} from 'echarts'
import {Row,Col,Card} from 'antd'
import './style.less'
import { barOption,lineOption,pieOption } from './options'
import { instance } from '../../utils/request'
export default function ECharts() {
    let barRef = useRef()
    let lineRef = useRef()
    let pieRef = useRef()
    useEffect(async()=>{
        let barChart = init(barRef.current)
        let lineChart = init(lineRef.current)
        let pieChart = init(pieRef.current)
        barChart.setOption(barOption)
        // instance('/1.1/classes/textData').then((res)=>{
        //     console.log(res.data.results[0].month)
        //     lineOption.series[0].data = res.data.results[0].month
        //     lineChart.setOption(lineOption)
        // })
        let res = await instance('/1.1/classes/textData')
        lineOption.series[0].data = res.data.results[0].month
        lineChart.setOption(lineOption)
        pieChart.setOption(pieOption)
    },[])
    return (
        <Row gutter={[10,10]}>
            <Col span='24'>
                <Card  title="柱状图">
                    <div ref={barRef} className='echartsbox'></div>
                </Card>
            </Col>
            <Col span='12'>
                <Card  title="条形图">
                    <div ref={lineRef} className='echartsbox'></div>
                </Card>
            </Col>
            <Col span='12'>
                <Card  title="饼状图">
                    <div ref={pieRef} className='echartsbox'></div>
                </Card>
            </Col>
        </Row>
    )
}
